<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
<!--    这里需要填写秘钥，百度API申请-->
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=bWEMvwHkg1I2K5hEygffU9bCkbq5sXAI"></script>
    <title>查看附近</title>
    <link rel="stylesheet" href="../css/bootstrap3.3.7.css">
    <script src="../js/jquery2.1.4.js"></script>
    <script src="../vue/Vue.js"></script>
    <script src="../vue/axios.js"></script>
</head>
<body>
<div id="allmap"></div>
<script src="../js/bootstrap3.3.7.js"></script>
<script>
    var mapVue = new Vue({
        el: '#allmap',
        data: {
            title: '',
            users: '',
            coaches: '',
            gyms: '',
            currentUser: '',
        },
        methods: {
            getBack() {
                console.log("getBack");
            },
            getAll() {
                console.log("all");
                //获取当前用户写入当前用户
                axios.get("/user/getCurrentUser").then(function (result) {
                    console.info(result.data);
                    mapVue.currentUser = result.data;
                    //获取完当前用户后更新位置
                    if (result.data.longitude != 0 && result.data.latitude != 0) {
                        theLocation(result.data.longitude, result.data.latitude);
                    }
                    if (GetQueryString('target') == 1) {
                        mapVue.getUsers();
                    } else if (GetQueryString('target') == 2) {
                        mapVue.getCoaches();
                    } else if (GetQueryString('target') == 3) {
                        mapVue.getGyms();
                    } else {
                        mapVue.getShowUser();
                    }
                });

            },
            getShowUser() {
                console.log("getShowUser");
                // 拿到当前用户后获取全部能展示信息来展示
                axios.get("/user/getShowUser", {
                    params: {
                        userId: mapVue.currentUser.id,
                        roleId: mapVue.currentUser.role,
                    }
                }).then(function (result) {
                    console.info(result.data);
                    mapVue.users = result.data;
                    remove_overlay();
                    drawPoint();
                });
            },
            getUsers() {
                console.log("getUser");
                axios.get("/user/getUsers", {
                    params: {
                        userId: mapVue.currentUser.id,
                    }
                }).then(function (result) {
                    console.info(result.data);
                    mapVue.users = result.data;
                    remove_overlay();
                    drawPoint();
                });

            },
            getCoaches() {
                console.log("coaches");
                axios.get("/user/getCoaches", {
                    params: {
                        userId: mapVue.currentUser.id,
                    }
                }).then(function (result) {
                    console.info(result.data);
                    mapVue.users = result.data;
                    remove_overlay();
                    drawPoint();
                });
            },
            getGyms() {
                console.log("gyms");
                axios.get("/user/getGyms", {
                    params: {
                        userId: mapVue.currentUser.id,
                    }
                }).then(function (result) {
                    console.info(result.data);
                    mapVue.users = result.data;
                    remove_overlay();
                    drawPoint();
                });
            },

        }
    })
</script>
</body>

</html>
<script type="text/javascript">
    mapVue.getAll();
    // 百度地图API功能
    map = new BMap.Map("allmap");
    // 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
    var point = new BMap.Point(104.072278, 30.663486);
    map.centerAndZoom(point, 15);

    //清除地图上的点
    function remove_overlay() {
        map.clearOverlays();
    }

    //地图加载完毕事件
    map.addEventListener("tilesloaded", function () {
        remove_overlay();
        drawPoint();
    });


    var studentIcon = new BMap.Icon("../images/studentPoint.svg", new BMap.Size(50, 68));
    var coachIcon = new BMap.Icon("../images/coachPoint.svg", new BMap.Size(50, 68));
    var gymIcon = new BMap.Icon("../images/gymPoint.svg", new BMap.Size(50, 68));


    // 用经纬度设置地图中心点
    function theLocation(longitude, latitude) {
        if (longitude !== "" && latitude !== "") {
            map.clearOverlays();
            var new_point = new BMap.Point(longitude, latitude);
            map.panTo(new_point);
            map.centerAndZoom(new_point, 15);
        } else {
            new BMap.Geolocation().getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                } else {
                    map.panTo(new BMap.Point(104.072278, 30.663486));
                }
            });
        }
    }

    //画标记点到地图上函数
    function drawPoint() {
        var json_data = mapVue.users;
        console.info(json_data);
        for (var i = 0; i < json_data.length; i++) {
            var pt = new BMap.Point(json_data[i].longitude, json_data[i].latitude);
            var marker;
            // 创建标注图片注判断
            if (json_data[i].role == "1") {
                marker = new BMap.Marker(pt, {
                    icon: studentIcon
                });
            } else if (json_data[i].role == "2") {
                marker = new BMap.Marker(pt, {
                    icon: coachIcon
                });
            } else {
                marker = new BMap.Marker(pt, {
                    icon: gymIcon
                });
            }
            // 将标注添加到地图中
            map.addOverlay(marker);
            //将值放入一个不用的空属性，供方法调用
            marker.Od = i;
            marker.addEventListener("click", attribute);
        }
    }


    //点击事件，没找到传入参数的办法
    function attribute(e) {
        //获取鼠标点击坐标
        // var p = e.target;
        // alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);
        var cliclUser = mapVue.users[this.Od];
        console.info(cliclUser);
        var sContent;
        if (cliclUser.role == "1") {
            //    学员
            sContent =
                "<a href='/lsw/student_view.html?id=" + cliclUser.id + "' style='text-decoration: none;'>" +
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + "学员昵称:" + cliclUser.nickname + "</h4>" +
                "<img style='float:right;margin:4px' id='imgDemo' src='" + cliclUser.avatar + "' width='139' height='104'/>" +
                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + "学员简介：" + cliclUser.description + "</p>" +
                "</a></div>";
        } else if (cliclUser.role == "2") {
            //    教练
            sContent =
                "<a href='/lsw/coach_view.html?id=" + cliclUser.id + "' style='text-decoration: none;'>" +
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + "教练昵称：" + cliclUser.nickname + "</h4>" +
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + "课程单价：" + cliclUser.price + "￥</h4>" +
                "<img style='float:right;margin:4px' id='imgDemo' src='" + cliclUser.avatar + "' width='139' height='104'/>" +
                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em;'>" + "教练简介：" + cliclUser.description + "</p>" +
                "</a></div>";
        } else {
            //    场馆
            sContent =
                "<a href='/lsw/gym_view.html?id=" + cliclUser.id + "' style='text-decoration: none;' id = 'infoLog'>" +
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + "场馆昵称：" + cliclUser.nickname + "</h4>" +
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + "场馆地址：" + cliclUser.address + "</h4>" +
                "<img style='float:right;margin:4px' id='imgDemo' src='" + cliclUser.avatar + "' width='139' height='104'/>" +
                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + "场馆介绍：" + cliclUser.description + "</p>" +
                "</a></div>";
        }

        // 创建信息窗口对象
        var infoWindow = new BMap.InfoWindow(sContent);


        this.openInfoWindow(infoWindow);

        //图片加载完毕重绘infowindow
        document.getElementById('imgDemo').onload = function () {
            //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
            console.log("已重新加载")
            infoWindow.redraw();
        }
    }


    //生成返回按钮控件，绑定vue事件
    function ZoomControl() {
        // 默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new BMap.Size(10, 10);
    }

    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control();
    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
    ZoomControl.prototype.initialize = function (map) {
        // 创建一个DOM元素
        var div = document.createElement("button");
        // 添加文字说明
        div.appendChild(document.createTextNode("返回"));
        // 设置样式
        div.className = "btn btn-info";
        // 绑定事件
        div.onclick = function () {
            console.log("返回");
            location.href = "/zlz/main.html";
        };
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    };


    //生成筛选按钮控件，绑定vue事件
    function ZoomControl1() {
        // 默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
        this.defaultOffset = new BMap.Size(10, 10);
    }

    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl1.prototype = new BMap.Control();
    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中

    //解析地址参数方法
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    ZoomControl1.prototype.initialize = function (map) {
        // 创建一个DOM元素
        var div = document.createElement("div");
        // 设置样式
        div.className = "btn-group";
        //方法数组，用作按钮循环添加事件
        var methods = [mapVue.getShowUser, mapVue.getUsers, mapVue.getCoaches, mapVue.getGyms];
        var btnNmae = ["全部", "学员", "教练", "场馆",];
        //循环添加按钮到div
        for (let i = 0; i < 4; i++) {
            if (GetQueryString('role') == i) {
                continue;
            }
            var button = document.createElement("button");
            button.className = "btn btn-primary";
            button.appendChild(document.createTextNode(btnNmae[i]));
            div.appendChild(button);
            // 添加绑定事件
            button.onclick = function () {
                methods[i]();
            }

        }

        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    };
    // 创建返回控件
    var myZoomCtrl = new ZoomControl();
    // 创建按钮组控件
    var myZoomCtrl1 = new ZoomControl1();
    // 添加到地图当中
    map.addControl(myZoomCtrl);
    // 添加到地图当中
    map.addControl(myZoomCtrl1);

</script>